import { defineComponent, defineAsyncComponent, reactive } from 'vue'
const userList = defineComponent({
  components: {
    PageTitle: defineAsyncComponent(() => import('@/components/PageTitle'))
  },
  setup () {
    const form = reactive({
      name: '',
      level: ''
    })

    const tableData = reactive([
      {
        name: 'xxx1',
        level: '1'
      },
      {
        name: 'xxx2',
        level: '2'
      }
    ])

    const sizeChange = (size: number) => {
      console.log(size, 'pppp')
    }

    return () => (
      <el-card class='margin-18'>
        <page-title></page-title>
        <el-form ref="form" v-model={form} label-width="100px">
          <el-row gutter={18}>
            <el-col span={6}>
              <el-form-item label="用户名：">
                <el-input v-model={form.name}></el-input>
              </el-form-item>
            </el-col>
            <el-col span={6}>
              <el-form-item label="用户级别：">
                <el-input v-model={form.name}></el-input>
              </el-form-item>
            </el-col>
            <el-col span={12}>
              <el-row type='flex' justify='end'>
                <el-button type="primary">查询</el-button>
                <el-button>重置</el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-form>

        <el-row>
          <el-table
            data={tableData}
            border={true}
            stripe={true}
            style={{ width: '100%' }}>
            <el-table-column prop="name" label="用户名"></el-table-column>
            <el-table-column prop="level" label="用户等级"></el-table-column>
          </el-table>
        </el-row>

        <el-row type='flex' justify='center' class='mt-18'>
          <el-pagination
            background
            onSizeChange={sizeChange}
            layout="total, sizes, , jumper, prev, pager, next"
            total={tableData.length}>
          </el-pagination>
        </el-row>
      </el-card>
    )
  }
})

export default userList
